<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>canvas</title>
</head>
<body>
	<canvas id="tutorial1" width="150" height="150">
	  these are called "fallback content":

		the canvas element has only two attributes, width and height.

		When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high.

		The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
	</canvas>
	<canvas id="rectangle" width="150" height="150"></canvas>
	<canvas id="triangle" width="150" height="150"></canvas>
	<canvas id="smiley-face" width="150" height="150"></canvas>
	<canvas id="line-to" width="150" height="150"></canvas>
	<script>
		var canvas = document.getElementById('tutorial1'),
			  ctx;

		if (canvas.getContext) {
		  ctx = canvas.getContext('2d');
			console.log(ctx)

      //The origin of this grid is positioned in the top left corner at coordinate (0,0). 
			ctx.fillStyle = "rgb(200,0,0)";
      ctx.fillRect (10, 10, 50, 50);

      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
      ctx.fillRect (30, 30, 50, 50);

			//part2 canvas only supports one primitive shape: rectangle 长方形
			ctx = document.getElementById('rectangle').getContext('2d');
			ctx.fillRect(25,25,100,100);
			ctx.clearRect(45,45,60,60);
			ctx.strokeRect(50,50,50,50);

			//part3 use path to draw triangle
			ctx = document.getElementById('triangle').getContext('2d');

			ctx.beginPath();
			ctx.moveTo(75,50);
			ctx.lineTo(100,75); 
			//ctx.lineTo(125,50); 
			ctx.lineTo(100,25);
		  //ctx.stroke(); // 画线
			ctx.fill(); // When you call fill(), any open shapes are closed automatically,

			//smiley-face
			ctx = document.getElementById('smiley-face').getContext('2d');

			ctx.beginPath();
            ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
            ctx.moveTo(110,75);
            ctx.arc(75,75,35,0,Math.PI,false);  // Mouth (clockwise)
            ctx.moveTo(65,65);
            ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
            ctx.moveTo(95,65);
            ctx.arc(90,65,5,0,Math.PI*2,false);  // Right eye
            ctx.stroke();

          // line-to
		  ctx = document.getElementById('line-to').getContext('2d');

		  // Filled triangle
          ctx.beginPath();
          ctx.moveTo(25,25);
          ctx.lineTo(105,25);
          ctx.lineTo(25,105);
          ctx.fill();

		  // Stroked triangle
          ctx.beginPath();
          ctx.moveTo(125,125);
          ctx.lineTo(125,45);
          ctx.lineTo(45,125);
          ctx.closePath();
          ctx.stroke();
		}
	</script>
</body>
</html>
